<template>
	<view class="index-top">
		<view class="head">
			<rf-navbar :title="'我的徽章'" @click="onBack"></rf-navbar>
			<view class="content" v-if="name==''">
				<view class="logo">
					<image :src="userInfo.avatar" :class="{'icon-default-avatar':!userInfo.avatar}"
						style="width: 120rpx; height: 120rpx; border-radius: 50%; border: 2px solid #fff;"
						mode="aspectFill">
					</image>
				</view>
				<view class="text">暂无徽章</view>
				<view class="b">努力完成任务获取徽章吧～</view>
			</view>
			<view class="curBadge" v-else>

				<view style="flex: 1; padding-left: 30rpx;">
					<view>
						<image :src="userInfo.avatar" :class="{'icon-default-avatar':!userInfo.avatar}"
							style="width: 120rpx; height: 120rpx; border-radius: 50%; border: 2px solid #fff;"
							mode="aspectFill">
						</image>
					</view>
					<view style="color: darkorange; margin-top: 10rpx;font-weight: bold;font-size: 34rpx;">{{name}}
					</view>
					<view style="margin-top: 10rpx;">{{remark}}</view>
				</view>
				<view style="flex: 1; text-align: center;">

					<image :src="imageUrl" style="width: 250rpx; height: 250rpx;" mode="aspectFit"></image>
				</view>
			</view>
			<view class="list-top">徽章体系</view>
		</view>
		<view class="list">

			<view class="grid col-2 text-center">
				<view class="cell" v-for="(item, index) in badges">
					<image :src="item.icon" mode="widthFix" :class="{normal:item.status==0}"></image>
					<view class=" title">
						<text>{{item.title}}</text>
					</view>
					<view class="summary">
						<text>{{item.summary}}</text>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex'; //引入mapState

	import {
		getCurrentBadge,
		getBadge,
	} from "@/api/user.js"
	export default {
		data() {
			return {
				statusBarHeight: this.statusBarHeight,
				navBarHeight: this.navBarHeight,
				menuHeight: this.menuHeight,
				menuRight: this.menuRight,
				menuTop: this.menuTop,
				menuBotton: this.menuBotton,

				name: "",
				remark: "",
				imageUrl: "",

				badges: [],

				pagination: {
					pageSize: 10, // 步长
					pageNum: 1, // 页码
				},

			};
		},
		onLoad() {

			this.getbadge()
		},
		computed: {
			...mapState(['userInfo', 'hasLogin'])
		},

		methods: {
			onBack() {
				uni.navigateBack();
			},

			getbadge() {
				let _that = this
				getBadge().then(res => {
					console.log("getBadge: " + JSON.stringify(res));
					_that.badges = _that.formatArray(res.data)
				})
				getCurrentBadge().then(res => {
					console.log("getCurrentBadge: " + JSON.stringify(res));
					this.name = res.data.name
					this.remark = res.data.remark
					this.imageUrl = res.data.imageUrl
				})
			},
			back() {
				uni.navigateBack();
			},
			viewMessage(msg) {
				uni.navigateTo({
					url: './noticedetails?noticeid=' + msg.id
				})
			},
			formatArray(arr) {
				return arr.map(item => {
					return {
						id: item.id,
						icon: item.imageUrl,
						title: item.name,
						summary: item.remark,
						status: item.status,
					}
				})
			}
		}

	};
</script>


<style lang="scss" scoped>
	.index-top {

		.head {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 998;

			width: 750rpx;
			height: 600rpx;
			background: linear-gradient(180deg, #ffdaa6 0%, #ffffff 100%);

			.content {
				margin: 0 auto;
				margin-top: 50rpx;
				width: 686rpx;
				height: 322rpx;
				background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.24) 100%);
				box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(255, 175, 81, 0.32);
				border-radius: 26rpx;
				transform: translateY(-20px);
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.logo {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					background-color: #fff;
					border: 4rpx solid #fff;
					margin-bottom: 20rpx;
					background-size: 100%;
				}

				.text {
					font-size: 40rpx;

					font-weight: 600;
					color: #ef6b25;
					line-height: 56rpx;
				}

				.b {
					font-size: 28rpx;

					font-weight: 500;
					color: #3a3d4b;
				}
			}

			.curBadge {
				margin: 0 auto;
				margin-top: 50rpx;
				width: 686rpx;
				height: 322rpx;
				background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.24) 100%);
				box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(255, 175, 81, 0.32);
				border-radius: 26rpx;
				transform: translateY(-20px);
				display: flex;
				align-items: center;
			}

			.list-top {
				height: 80rpx;
				padding: 10rpx 40rpx;
				font-size: 32rpx;
				font-weight: 700;
				color: #3a3d4b;
				background-color: #fff;

			}
		}

		.list {
			position: relative;
			z-index: 10;
			top: 630rpx;

			background-color: #fff;
			padding: 0 40rpx;
			padding-bottom: 80rpx;

			.normal {
				filter: grayscale(100%);
			}


			.cell {
				padding: 20rpx 46rpx;

				.title {
					font-size: 28rpx;
					font-weight: bold;
					color: #3A3D4B;
				}

				.summary {
					color: #53586C;
				}
			}
		}
	}
</style>